<template>
  <a-modal v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
           :align-center="LAYER.alignCenter" :top="LAYER.top"
           :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
           :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
           :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">

    <a-form ref="formRef" :model="formState" layout="vertical" :rules="RULES">


      <a-row :gutter="12">

        <a-col :span="24">
          <a-form-item label="公众号" field="appId"  >
            <smart-dict v-model="formState.appId" :url="WxmpOptions.AccountOptions"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="标签名称" field="tagName">
            <a-input v-model="formState.tagName" allow-clear placeholder="标签名称"/>
          </a-form-item>
        </a-col>


      </a-row>


    </a-form>

  </a-modal>
</template>

<script lang="ts" setup>

import {WxmpOptions} from '@/libs/options'
import {EditModal} from '@/libs/core'
import {WXMP_TAGS_EDIT} from "../resource/form";
import {WxmpHttp} from '../resource/http'


const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])
const {RULES, BODY} = WXMP_TAGS_EDIT

const {addWxmpTags, updateWxmpTags} = WxmpHttp
const config = {tplRecord: BODY, rawRecord: props.record, rowKey: 'id', emit}


const service = new EditModal(config).setAddRequest(addWxmpTags).setUpdateRequest(updateWxmpTags)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
const title = isUpdate ? '修改标签 ' : '新建标签 '
service.setMD(title, 500)
</script>
